<template>
  <div :class="prefixCls" :style="getWrapStyle">
    <Spin :spinning="loading" size="large" :style="getWrapStyle">
      <iframe
        :src="frameSrc"
        :class="`${prefixCls}__main`"
        ref="frameRef"
        @load="hideLoading"
      ></iframe>
    </Spin>
  </div>
</template>
<script lang="ts" setup>
import type {CSSProperties} from 'vue';
import {ref, unref, computed} from 'vue';
import {Spin} from 'ant-design-vue';
import {useWindowSizeFn} from '@xueyi/hooks';
import {propTypes} from '/@/utils/propTypes';
import {useDesign} from '/@/hooks/web/useDesign';
import {useLayoutHeight} from '/@/layouts/default/content/useContentViewHeight';

defineProps({
  frameSrc: propTypes.string.def(''),
});

const loading = ref(true);
const topRef = ref(50);
const heightRef = ref(window.innerHeight);
const frameRef = ref<HTMLFrameElement>();
const {headerHeightRef} = useLayoutHeight();

const {prefixCls} = useDesign('iframe-page');
useWindowSizeFn(calcHeight, {wait: 150, immediate: true});

const getWrapStyle = computed((): CSSProperties => {
  return {
    height: `${unref(heightRef)}px`,
  };
});

function calcHeight() {
  const iframe = unref(frameRef);
  if (!iframe) {
    return;
  }
  const top = headerHeightRef.value;
  topRef.value = top;
  heightRef.value = window.innerHeight - top;
  const clientHeight = document.documentElement.clientHeight - top;
  iframe.style.height = `${clientHeight}px`;
}

function hideLoading() {
  loading.value = false;
  calcHeight();
}
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-iframe-page';

.@{prefix-cls} {
  .ant-spin-nested-loading {
    position: relative;
    height: 100%;

    .ant-spin-container {
      width: 100%;
      height: 100%;
      padding: 10px;
    }
  }

  &__mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &__main {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0;
    background-color: @component-background;
  }
}
</style>
